<template>
  <div class="Reg">
    <Header title="新用户注册" path="/home"></Header>
    <form action="">
      <mt-field label="昵称" placeholder="请输入昵称" v-model="nickName"></mt-field>
      <!-- <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email"></mt-field> -->
      <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>

      <div>
        <router-link to="home">
          <mt-button type="primary" @click.native="reg">注册</mt-button>
        </router-link>
        <mt-button type="default" @click.native="reset">重置</mt-button>
      </div>
    </form>
  </div>
</template>

<script>
import Qs from 'qs'
import { Toast } from "mint-ui";
import Header from "@/components/Header.vue";
export default {
  name: "RegCom",
  data() {
    return {
      nickName: '',
      password: '',
      phone: ''
      // email: '',

    }
  },

  methods: {
    reg() {
      const params = Qs.stringify({
        avatarUrl: "cucumber",
        nickName: this.nickName,
        password: this.password,
        email: '191647215@qq.com',
        phone: this.phone
      });
      this.$axios.post('addUser', params).then(rs => {
        if (rs) {

          Toast('注册成功')
        } else {
          Toast('该号码已被注册！');
        }
      })
    },
    reset() {
      this.nickName = '',
        this.password = '',
        this.phone = ''
      // this.email = ''
    },
  },
  components: {
    Header
  }
};
</script>

<style lang="less" scoped>
.Reg {
  form {
    margin-top: 40px;

    div {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;

      .mint-button--normal {
        padding: 0 20px;
        height: 35px;

      }
    }
  }
}
</style>
